<template>
    <div class="findlife">
        <div class="top">
            <el-row :gutter="20">
                <el-col :span="3"
                    ><div class="grid-content bg-purple">
                        <el-button type="danger" round @click="delGroup" :disabled="this.sels.length === 0" icon="el-icon-delete">
                            批量删除</el-button
                        >
                    </div></el-col
                >
                <el-col :span="3"
                    ><div class="grid-content bg-purple">
                        <el-button type="primary" round @click="dialogFormVisible = true" icon="el-icon-circle-plus-outline"
                            >添加</el-button
                        >
                    </div></el-col
                >
                <el-col :span="14"
                    ><div class="grid-content bg-purple">
                        <el-input placeholder="请输入学员姓名" v-model="sname" class="input"></el-input>
                        <el-button type="primary" round @click="chaxun" icon="el-icon-search">查询</el-button>
                    </div></el-col
                >
                <el-col :span="2"
                    ><div class="grid-content bg-purple">
                        <el-button type="primary" round @click="exit" icon="el-icon-back">返回查看全部学生</el-button>
                    </div></el-col
                >
            </el-row>
            
        </div>
        <div class="table">
            <el-table
                :data="life_list.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                :fit="true"
                :row-key="getRowKey"
                @row-click="handleCurrentChange1"
                @selection-change="selsChange"
                ref="table"
                style="width: 100%"
                stripe
                v-loading="loading"
            >
                <el-table-column type="selection" min-width="15%" reserve-selection=""></el-table-column>

                <el-table-column prop="id" label="编号" min-width="25%" v-if:"show"> </el-table-column>
                <el-table-column prop="name" label="姓名" min-width="65%"> </el-table-column>
                <el-table-column prop="date" label="日期" min-width="55%"> </el-table-column>
                <el-table-column prop="content" label="事件" min-width="55%"> </el-table-column>
                <el-table-column prop="reduce" label="扣除的分数" min-width="55%"> </el-table-column>

                <el-table-column label="操作" width="200" align="center">
                    <!-- eslint-disable -->
                    <!-- 屏蔽编译过程错误 -->
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-delete" @click="shanchu(scope.$index, scope.row)"> 删除</el-button>
                    </template>
                    <!-- eslint-enable -->
                </el-table-column>
            </el-table>
        </div>
        <div class="block">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[1, 3, 5]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalNum"
            >
            </el-pagination>
        </div>

        <el-dialog title="添加学员日常信息" :visible.sync="dialogFormVisible">
            <el-form ref="form" :model="form" :rules="rules">
                <el-form-item label="学员名称" prop="name" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off" placeholder="请输入在读学员的姓名"></el-input>
                </el-form-item>
                <el-form-item label="日期" prop="date" :label-width="formLabelWidth">
                    <el-input type="date" v-model="form.date" autocomplete="off" placeholder="请选择日期"></el-input>
                </el-form-item>
                <el-form-item label="发生的事件" prop="content" :label-width="formLabelWidth">
                    <el-input v-model="form.content" autocomplete="off" placeholder="请填写发生的事件"></el-input>
                </el-form-item>
                <el-form-item label="扣除的分数" prop="reduce" :label-width="formLabelWidth">
                    <el-select v-model="form.reduce" placeholder="请选择要扣除的分数">
                        <el-option label="0" value="0"></el-option>
                        <el-option label="5" value="5"></el-option>
                        <el-option label="10" value="10"></el-option>
                        <el-option label="15" value="15"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="tianjia('form')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    inject: ['reload'],
    data() {
        return {
            rules: {
                name: { required: true, message: '请输入学员名称', trigger: 'blur' },
                date: { required: true, message: '请选择日期', trigger: 'blur' },
                content: { required: true, message: '请输入发生的事件', trigger: 'blur' },
                reduce: { required: true, message: '请选择需要扣除的分数', trigger: 'blur' }
            },
            sname: '',
            life_list: [],
            currentPage: 1, //默认显示第一页
            pageSize: 5, //默认每页显示10条
            totalNum: 20, //总页数
            sels: [], //选中的值
            total: 0,
            start: 0,
            size: 10,
            form: {
                id: '',
                name: '',
                date: '',
                content: '',
                reduce: ''
            },
            formLabelWidth: '120px',
            dialogFormVisible: false,
            loading: false
        };
    },
    methods: {
        tianjia(formName) {
            var a = this.form.name;
            var b = this.form.date;
            var c = this.form.content;
            var d = this.form.reduce;
            console.log(a, b, c, d);
            // if (a || b || c || d == null) {
            //     this.dialogFormVisible = true;
            //     alert('请按照规矩把信息填写完整');
            // } else {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.dialogFormVisible = false;
                    this.axios({
                        method: 'post',
                        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                        url: 'http://192.168.2.225:8080/com.huidian.rem/AddDisrule',
                        data: JSON.stringify({
                            name: a,
                            date: b,
                            content: c,
                            reduce: d
                        })
                    }).then((res) => {
                        console.log(res);
                        if (res.data != 1) {
                            this.$message.error('没有找到这个学员，添加失败');
                        } else {
                            this.$message.success('添加成功');
                            this.reload();
                        }
                    });
                } else {
                    this.dialogFormVisible = true;
                    alert('请按照规矩把信息填写完整');
                    return false;
                }
            });

            // }
        },
        chaxun() {
            var that = this;
            var yyy = that.sname;

            this.axios({
                method: 'post',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                url: 'http://192.168.2.225:8080/com.huidian.rem//FindoneDisruleByname',
                data: JSON.stringify({
                    name: yyy
                })
            }).then((res) => {
                console.log(res);
                if (res.data=="没有违规记录") {
                    this.$message.error("没有此人的违规记录，这是个好学生！")
                }else{
                     that.life_list = res.data;
                that.totalNum = that.life_list.length;
                }
               
            });
        },
        shanchu(index, row) {
            this.idx = index;
            this.form = row;
            // this.dialogFormVisible = true;
            var id = this.form.id;
            console.log(id);
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.axios({
                        method: 'post',
                        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                        url: 'http://192.168.2.225:8080/com.huidian.rem/DelectDisrule',
                        data: JSON.stringify({
                            id: id
                        })
                    }).then((res) => {
                        console.log(res);
                        this.$message.success('删除成功');
                        this.reload();
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        exit() {
            this.loading = true;
            this.reload(() => {
                this.loading = false;
            });
        },
        selsChange(sels) {
            this.sels = sels;
        },
        // 分页
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val; //动态改变
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val; //动态改变
        },
        delGroup() {
            var ids = this.sels.map((item) => item.id).join(); //获取所有选中行的id组成的字符串，以逗号分隔
            console.log(ids);

            this.$confirm('此操作将永久删除这些数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.axios({
                        method: 'post',
                        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                        url: 'http://192.168.2.225:8080/com.huidian.rem/DelectDisrule',
                        data: JSON.stringify({
                            id: ids
                        })
                    }).then((res) => {
                        console.log(res);
                        this.$message.success('删除成功');
                        this.reload();
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        handleCurrentChange1(row) {
            this.$refs.table.toggleRowSelection(row);
        },
        getRowKey(row) {
            return row.id;
        }
    },
    created: function () {
        var that = this;
        this.axios('http://192.168.2.225:8080/com.huidian.rem/FindAlldisrule').then(function (res) {
            that.life_list = res.data;
            console.log(res);
            // this.loading=true
            that.totalNum = that.life_list.length;
        });
    }
};
</script>
<style lang="less" scoped>
.table {
    height: 350px;
}
.block {
    height: 100px;
    left: 30%;
    position: absolute;
    margin: 0 auto;
}
.el-row {
    margin-bottom: 20px;
    &:last-child {
        margin-bottom: 0;
    }
}
.el-col {
    border-radius: 4px;
}

.bg-purple {
    .input {
        width: 50%;
    }
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}
.row-bg {
    padding: 10px 0;
}
</style>